<template>
    <el-row>
        <el-col>
            <div class="block text-center" m="t-4">
                <el-carousel trigger="click" height="150px">
                    <el-carousel-item :key="1">
                        <!-- <div style="width: 100%; height: 100%; background: url() top center no-repeat; background-size: cover;"></div> -->
                        <img src="../../assets/images/2023-12-10_154651.jpg" style="width: 100%; height: 100%;" />
                    </el-carousel-item>
                    <el-carousel-item :key="2">
                        <img src="../../assets/images/2023-12-10_152157.png" style="width: 100%; height: 100%;" />
                    </el-carousel-item>
                    <el-carousel-item :key="3">
                        <img src="../../assets/images/2023-12-05_152345.jpg" style="width: 100%; height: 100%;" />
                    </el-carousel-item>
                    <el-carousel-item :key="4">
                        <img src="../../assets/images/2023-12-05_150504.jpg" style="width: 100%; height: 100%;" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-col>
    </el-row>
    <h3 style="text-align: left; margin: 30px 0 0px 10px;"><el-icon>
            <Promotion />
        </el-icon> 快捷入口</h3>
    <el-row :gutter="12">
        <el-col :span="6">
            <RouterLink to="/censorfile/newfile">
                <el-card shadow="never">
                    <div class="card_content">
                        <div class="card_content_text">
                            <h4>
                                <el-icon>
                                    <DocumentAdd />
                                </el-icon> 新建文稿
                            </h4>
                            <span>新建以编辑文稿</span>
                        </div>
                        <img src="../../assets/images/shortcut083636.png" class="card_content_image" alt="" srcset="">
                    </div>
                </el-card>
            </RouterLink>
        </el-col>
        <el-col :span="6">
            <RouterLink to="/censorfile">
                <el-card shadow="never">
                    <div class="card_content">
                        <div class="card_content_text">
                            <h4>
                                <el-icon>
                                    <DocumentChecked />
                                </el-icon> 我要审稿
                            </h4>
                            <span>AI模型智能审稿</span>
                        </div>
                        <img src="../../assets/images/shortcut090308.png" class="card_content_image" alt="" srcset="">

                    </div>
                </el-card>
            </RouterLink>
        </el-col>
        <el-col :span="6">
            <RouterLink to="manager/recycle/recover">
                <el-card shadow="never">
                    <div class="card_content">
                        <div class="card_content_text">
                            <h4>
                                <el-icon>
                                    <Download />
                                </el-icon> 数据恢复
                            </h4>
                            <span>查看或下载备份</span>
                        </div>
                        <img src="../../assets/images/shortcut090549.png" class="card_content_image" alt="" srcset="">

                    </div>
                </el-card>
            </RouterLink>
        </el-col>
        <el-col :span="6">
            <RouterLink to="/safecenter">
                <el-card shadow="never">
                    <div class="card_content">
                        <div class="card_content_text">
                            <h4>
                                <el-icon>
                                    <Aim />
                                </el-icon> 安全中心
                            </h4>
                            <span>保护信息，安全可靠</span>
                        </div>
                        <img src="../../assets/images/shortcut005116.png" class="card_content_image" alt="" srcset="">
                    </div>
                </el-card>
            </RouterLink>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="5" style="text-align: left;">
            <h3 style="text-align: left; margin: 35px 0 25px 10px;"><el-icon>
                    <Clock />
                </el-icon> 最近打开
                <!-- <el-button type="warning" round>批量移除</el-button> -->
            </h3>
        </el-col>
        <el-col :span="13" style="text-align: left;">
            <el-button type="warning" round v-show="showbtns">批量移除</el-button>
        </el-col>
        <el-col :span="6" style="text-align: right;">
            <el-button type="text">
                <svg t="1702192426842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="7473" width="32" height="32">
                    <path
                        d="M327.68 686.08a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H204.8a10.24 10.24 0 0 1-10.24-10.24V696.32a10.24 10.24 0 0 1 10.24-10.24z m491.52 0a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H450.56a10.24 10.24 0 0 1-10.24-10.24V696.32a10.24 10.24 0 0 1 10.24-10.24z m-501.76 20.48H215.04v102.4h102.4V706.56z m491.52 0H460.8v102.4h348.16V706.56zM327.68 440.19712a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H204.8a10.24 10.24 0 0 1-10.24-10.24v-122.88a10.24 10.24 0 0 1 10.24-10.24z m491.52 0a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H450.56a10.24 10.24 0 0 1-10.24-10.24v-122.88a10.24 10.24 0 0 1 10.24-10.24z m-501.76 20.48H215.04v102.4h102.4v-102.4z m491.52 0H460.8v102.4h348.16v-102.4zM327.68 194.56a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H204.8a10.24 10.24 0 0 1-10.24-10.24V204.8a10.24 10.24 0 0 1 10.24-10.24z m491.52 0a10.24 10.24 0 0 1 10.24 10.24v122.88a10.24 10.24 0 0 1-10.24 10.24H450.56a10.24 10.24 0 0 1-10.24-10.24V204.8a10.24 10.24 0 0 1 10.24-10.24z m-501.76 20.48H215.04v102.4h102.4V215.04z m491.52 0H460.8v102.4h348.16V215.04z"
                        fill="#202020" p-id="7474"></path>
                </svg>
            </el-button>
        </el-col>

    </el-row>
    <el-table :data="tableData" height="666px" style="width: 100%" highlight-current-row="true" table-layout="auto"
        :default-sort="{ prop: 'modifytime', order: 'descending' }" @selection-change="handleSelectionChange"
        empty-text="--">
        <!-- (order: 'ascending' 'descending') -->
        <el-table-column type="selection" width="30" />
        <el-table-column label="" width="25">
            <template #default="scope"></template>
        </el-table-column>
        <el-table-column label="文件名">
            <template #default="scope">
                <el-link :underline="false">
                    <div style="display: flex; align-items: center">
                        <img src="../../assets/images/folder.png" v-if="scope.row.filetype == '文件夹'" />
                        <img src="../../assets/images/txt.png" v-else-if="scope.row.filetype == 'txt文本文件'" />
                        <img src="../../assets/images/unknown.png" v-else />
                    </div>&nbsp;&nbsp;{{ scope.row.filename }}
                </el-link>
            </template>
        </el-table-column>
        <el-table-column prop="modifytime" label="修改时间" sortable />
        <el-table-column prop="filesize" label="大小(KB)" sortable />
        <el-table-column prop="filetype" label="类型" />
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button text @click="handleEdit(scope.$index, scope.row)"><el-icon>
                        <Edit />
                    </el-icon> 审阅</el-button>
                <el-button plain type="warning" text :disabled="false" @click="handleDelete(scope.$index, scope.row)">
                    <el-icon>
                        <DocumentRemove />
                    </el-icon> 移出“最近打开”列表
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import { imageEmits } from 'element-plus';
import { ref } from 'vue'

export default {
    data() {
        return {
            tableData: [
                {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-10 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                },
                {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-11 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-09 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-01 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-02 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-03 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-04 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-10 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-10 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }, {
                    filename: 'ts_百稿审.txt',
                    modifytime: '2023-12-10 13:28',
                    filesize: '666',
                    filetype: 'txt文本文件'
                }
            ],
            showbtns: false
        };
    },
    methods: {
        handleEdit: (index, row) => {
            console.log(index, row);
        },
        handleDelete: (index, row) => {
            console.log(index, row);
        },
        handleSelectionChange(selection) {
            if (selection.length != 0) {
                this.showbtns = true
            } else {
                this.showbtns = false
            }
        },
    },
    components: { imageEmits }
}
</script>

<style scoped>
.el-row {
    /* margin: 0; */
    margin: 10px 10px 0 0;
    border-radius: 10px;
    overflow: hidden;
}


.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background: linear-gradient(45deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);
}

.el-col {
    align-items: center;
}

.el-col .el-button {
    margin: 35px 0px 25px 10px;
}

/* 
    background: linear-gradient(135deg, #c7e9fb, #a6defa, #80d4f9, #5bc9f8, #35bef7);
    background: linear-gradient(135deg, #a8e063, #56ab2f);
    background: linear-gradient(135deg, #ffbe0c, #ffda0c, #fff70c, #c2ff0c, #7aff0c); 
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);

*/

.el-carousel__item:nth-child(2n + 1) {
    background: linear-gradient(-45deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6);
}

.el-card {
    border-radius: 10px;
    border: none;
    background: none;
    padding-top: 20px;
    margin: 0 15px 0 10px;
}

:deep().el-card__body {
    padding: 0px !important;
}

.el-card .card_content {
    padding: 0;
    display: flex;
    flex-direction: row;
    background: rgba(166, 222, 250, .52);
    border-radius: 10px;
    min-height: 90px;
    max-height: 100px;
    float: left;
}

.card_content_text {
    width: 60%;
}

.card_content_text span {
    color: #99A9BF;
    font-size: small;
}

.card_content_text h4 {
    margin: 15px 0 5px 0;
}

.card_content_image {
    width: 40%;
    transform: translateY(-20px);
}

.cell {
    text-align: left;
}

.cell .el-button {
    margin: 0 10px 0 0;
    padding: 0;
}
</style>